<template>
    <el-card shadow="never" class="card-border-none">
        <!-- 新增,刷新 -->
      <list-header
        :permissions="{
          create: 'createUserLevel,POST',
          refresh: 'getUserLevelList,GET',
        }"
        @create="handleCreate"
        @refresh="getData"
      >
      </list-header>

      <!-- 表格 -->
        <el-table
        id="list-table" 
        :data="tableData" 
        style="width: 100%" 
        stripe
        lazy>
            <el-table-column align="left" label="会员等级" prop="name"></el-table-column>
            <el-table-column prop="discount" align="center" label="折扣率(%)"></el-table-column>
            <el-table-column prop="level" align="center" label="等级序号"></el-table-column>
            <el-table-column v-permission="['updateUserLevelStatus,POST']" 
            prop="status" label="状态" width="120" align="left">
                <template #default="{ row }">
                    <el-switch @change="handleStatusChange($event,row)" :active-value="1" :inactive-value="0" :model-value="row.status"
                    :loading="row.statusLoading" />
                </template>
            </el-table-column>
            <el-table-column  v-permission="['updateUserLevel,POST','deleteUserLevel,POST']" fixed="right" label="操作" width="180" align="center">
                <template #default="{ row }">
                    <el-button v-permission="['updateUserLevel,POST']" link type="primary" size="small" @click="handleEdit(row)" style="margin-right:8px">修改</el-button>
                    <el-popconfirm title="是否要删除该记录？" @confirm="handleDelete(row.id)" confirm-button-text="是" cancel-button-text="否">
                        <template #reference>
                            <el-button v-permission="['deleteUserLevel,POST']" link type="primary" size="small">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination">
            <el-pagination
            :currentPage="currentPage"
            background
            layout="prev, pager, next"
            :page-size="limit"
            :total="total"
            @current-change="getData"
            ></el-pagination>
        </div>

        <!-- 新增|修改表单 -->
        <form-drawer 
        ref="formDrawerRef" 
        :title="drawerTitle" 
        @submit="handleSubmit"
        :showActions="true"
        :destroyOnClose="true">
            <el-form :model="form" ref="formRef" :rules="rules" label-width="80px" :inline="false" size="default">
                <el-form-item label="等级名称" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="等级权重" prop="level">
                    <el-input type="number" v-model="form.level" style="width: 50%;"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-switch v-model="form.status" :active-value="1" :inactive-value="0"></el-switch>
                </el-form-item>
                <el-form-item label="升级条件">
                    <div class="upgrades-content">
                        <div>
                            <small style="margin-right:8px">累计消费满</small>
                            <el-input type="number" v-model="form.max_price" placeholder="累计消费" style="width: 50%;">
                                <template #append>元</template>
                            </el-input>
                            <small style="display:block;color:#9ca3af">
                                设置会员等级所需要的累计消费必须大于等于0,单位：元
                            </small>
                        </div>
                        <div style="margin-left:32px">
                            <small style="margin-right:8px">累计次数满</small>
                            <el-input type="number" v-model="form.max_times" placeholder="累计次数" style="width: 50%;">
                                <template #append>次</template>
                            </el-input>
                            <small style="display:block;color:#9ca3af">
                                设置会员等级所需要的购买量必须大于等于0,单位：笔
                            </small>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="折扣率(%)">
                    <el-input type="number" v-model="form.discount" placeholder="折扣率" style="width: 50%;">
                        <template #append>%</template>
                    </el-input>
                    <small style="color:#9ca3af">
                        折扣率单位为百分比，如输入90，表示该会员等级的用户可以以商品原价的90%购买
                    </small>
                </el-form-item>
            </el-form>
        </form-drawer>
    </el-card>
</template>
<script setup>
import ListHeader from '~/components/ListHeader.vue'
import FormDrawer from '~/components/FormDrawer.vue'
import { useInitTable,useInitForm } from '~/composables/useCommon'
import { 
    createUserLevel,
    updateUserLevel,
    getUserLevelList,
    updateUserLevelStatus,
    deleteUserLevel
} from '~/api/user_level'

// 初始化表格数据
const {
    // 分页
    currentPage,
    limit,
    total,
    // 表格数据
    tableData,
    // 获取数据方法
    getData,
    // 删除
    handleDelete,
    // 修改状态
    handleStatusChange
} = useInitTable({
    // 获取数据的方法
    getList:getUserLevelList,
    // 获取数据成功之后的回调
    success:(res)=>{
        total.value = res.totalCount
        tableData.value = res.list.map(o=>{
            o.statusLoading = false
            return o
        })
    },
    // 删除/批量删除api
    deleteData:deleteUserLevel,
    // 修改状态api
    updateStatus:updateUserLevelStatus,
})

// 初始化表格
const {
    drawerTitle,
    form,
    formRef,
    rules,
    formDrawerRef,
    handleSubmit,
    handleCreate,
    handleEdit
} = useInitForm({
    // 表单初始数据
    form:{
        id: null,
        name:"",
        max_price:0,
        max_times:0,
        discount:0,
        level:0,
        status:1,
    },
    // 表单验证规则
    rules:{
        name: [{
            required: true,
            message: "等级名称不能为空",
            trigger: 'blur'
        }]
    },
    // 获取数据方法
    getData,
    // 新增数据api
    createData:createUserLevel,
    // 修改数据api
    updateData:updateUserLevel,
})
</script>
<style lang="scss" scoped>
.card-border-none {
  border: none;
  .upgrades-content {
    display: flex;
    justify-content: left;
    align-items: center;
  }
  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
}
:deep(.el-card__body) {
  background: #fff;
  border-radius: 4px;
}
</style>